<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <title>支付</title>
    <link href="../file/css/toPay.css" rel="stylesheet" type="text/css"/>
    <link href="../file/images/dianmin.png" rel="shortcut icon" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="../file/css/gwc.css"/>
</head>

<body>
<div class="top">
    <img src="../file/images/dianmin.png" width="300px" height="100px">
    <div class="header-info">
        <div class="login-info" id="login_info">
            <!--用户-->
        </div>
        <div class="person-info">
            <span>|</span>
            <a href="../index.html">返回首页</a>
            <span>|</span>
            <a href="./perInfo.html">个人信息</a>
            <span>|</span>
            <a onclick="exitLogin()" style="cursor: pointer">退出登录</a>
        </div>
    </div>
</div>

<div class=zhifu>
        <h3>确认支付</h3>
        <form id="form1" onsubmit="return false" action="##" method="post" class="form-inline">
<!--            <div style="float: left;font-weight: bolder;">订单金额：</div><div id="totalPrice">${TotalPrice}</div>-->
<!--            <div style="float: left;font-weight: bolder;">用户昵称：</div><div id="myName">${nickname}</div>-->
            <div class="form-group">
                <label for="mid">会员账号：</label>
                <input type="text"  name="mno" class="form-control" id="mid" placeholder="" readonly="true">
            </div>
            <div class="form-group">
                <label for="theTotalPrice">订单金额：</label>
                <input type="text" name="totalPrice" class="form-control" id="theTotalPrice" placeholder="" readonly="true">
            </div>
            <div class="form-group">
                <label for="theSalePrice">实付金额：</label>
                <input type="text" name="discount" class="form-control" id="theSalePrice" placeholder="" readonly="true">
            </div>
            <div class="form-group">
                <label for="theNickname">用户昵称：</label>
                <input type="text" name="nickname" class="form-control" id="theNickname" placeholder="" readonly="true">
            </div>
            <div class="form-group">
                <label for="pwd">输入密码：</label>
                <input type="password" name="pwd" class="form-control" id="pwd" placeholder="">
            </div>
            <div id="button-two">
                <button type="button" onclick="surePay()" class="btn btn-success" style="font-size:20px">确认支付</button>
                <a href="gwc.html" class="btn btn-primary btn-lg active" role="button">取消支付</a>
            </div>
        </form>
    </div>
</body>f

<script src="../file/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="../file/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="../file/js/slide.js" type="text/javascript"></script>

<script>

    $(function () {
        let totalPrice = location.hash.replace("#", "");	//替换      '#' -> ''
        console.log(totalPrice);

        $.ajax({
            url: "/user/toPay/"+totalPrice ,
            type: "GET",
            success:function (data){
                console.log(data);
                // truePwd = data.user.pwd;
                document.getElementById('mid').value = data.user.mno;
                document.getElementById('theTotalPrice').value = data.totalPrice;
                document.getElementById('theSalePrice').value = data.discount;
                document.getElementById('theNickname').value = data.user.nickname;
                // $("#totalPrice").html(data.totalPrice+"&nbsp;&nbsp;¥");
                // $("#myName").html(data.user.nickname);
                let str = '<a href="./perInfo.html"> 【' + data.user.nickname + '】</a>';
                //放入进去上面空的地方
                $(".login-info").html(str);
            }
        })
    });
    function surePay() {
        console.log($('#form1').serialize());
        var inputPwd = document.getElementById('pwd').value;

        $.ajax({
            type: "GET",//方法类型
            url: "/user/surePay",//url
            data: $('#form1').serialize(),
            success: function (result) {
                console.log(result);
                //先在前端校验密码是否正确
                if(result.nickname=="error"){
                    alert("密码错误! 请重新输入 ")
                    return;
                }else{
                    alert("支付成功！");
                    location.href="./order.html";
                }
            },
            error: function(result){
                alert("确认失败！请勿刷新或回退到本页面");
                location.href="../index.html";
            }
        });
    }
    function exitLogin() {
        $.ajax({
            url: "/exitLogin" ,
            type: "GET",
            success: function () {
                location.href="../index.html";
            }
        })
    };

</script>
</html>